<template>
  <div class="w-100 h-100" style="position: relative">
    <div
      style="width: 100%; height: 10%; position: absolute; top: 0; right: 0"
      class="d-flex justify-content-end"
    >
      <FakeLegend
        style="margin: auto 30px auto 0px"
        :color="colorSingleList"
        :text="['按期完成', '超期完成']"
      >
      </FakeLegend>
    </div>
    <div class="w-100 h-100 xjjl-box">
      <div id="xjjl" style="width: 100%; height: 100%"></div>
      <!-- <div id="xjjl" style="width: 1300px; height: 100%"></div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { useOptions } from "@/hook/useOptions";
import FakeLegend from "@/components/project/fakeLegend.vue";
import { chartOptions } from "@/hook/chartOptions";
import {useFunc} from "@/hook/useFunc";

const colorSingleList = ["rgba(3, 230, 254, 1)", "rgba(184, 235, 143, 1)"];

const jsonData: any = inject("jsonData");
const props = defineProps({
  year: {
    default: 2024,
  },
});

const current = computed(() => {
  let data = [[], []];
  try {
    data = jsonData.value.underJsc.xjjl[props.year];
  } catch (error) {}

  return data;
});
let myChart1: any;

watch(
  () => current.value,
  (val) => {
    if (val) {
      myChart1.setOption({
        series: [{ data: val[0] }, { data: val[1] }],
      });
    }
  }
);

onMounted(() => {
  const option: any = chartOptions().twoBarOption(echarts, ['按期完成', '超期完成']);
  option.xAxis[0].data = useOptions().month;
  option.yAxis[0].name = "个";
 option.dataZoom= [
            {
                type: 'slider',
                height: 0,
                moveHandleSize: 10,
                xAxisIndex: 0,
                zoomLock: true,
                start: 0,
                bottom: "20%",
                end: 60
            }
        ]
  option.grid = {
            bottom: "15%",
          };
  myChart1 = echarts.init(document.getElementById("xjjl") as HTMLElement);
  myChart1.setOption(option);

  const scrollContainer = document.querySelector(".xjjl-box");
  // useFunc().autoScroll(scrollContainer, "horizontal");
});
</script>

<style lang="less" scoped>
.bottom {
  width: 100%;
  height: 84%;
  display: flex;
}
</style>
